<template>
  <div class="container">
    <textarea
      class="input"
      placeholder="说出你的想法吧..."
      v-model="content"
    ></textarea>
    <div class="img-upload">
      <label class="upload-btn" for="uploads"></label>
      <input
        type="file"
        id="uploads"
        @change="selectImg"
        style="position:absolute; clip:rect(0 0 0 0);"
        accept="image/*"
      />

      <img
        :src="item"
        v-for="(item, index) in img_link"
        width="200"
        height="200"
      />
    </div>

    <div class="btn-hub">
      <div
        @click="$router.push('/choose-category')"
        class="btn-cell with-grey-bottom-border"
      >
        <div class="left">
          <img src="@/assets/发视频-assets/category.png" alt="" />
          选择分类
        </div>
        <div class="right"></div>
      </div>
      <div
        @click="$router.push('/choose-location')"
        class="btn-cell with-grey-bottom-border"
      >
        <div class="left">
          <img src="@/assets/发视频-assets/location.png" alt="" />
          所在位置
        </div>
        <div class="right"></div>
      </div>
      <div class="btn-cell with-grey-bottom-border">
        <div class="left">
          <img src="@/assets/发视频-assets/eite.png" alt="" />
          提醒谁看
        </div>
        <div class="right"></div>
      </div>
    </div>
    <div class="bottom-btn">
      <button class="cancel" @click="back">取消</button>
      <button class="send" @click="send">发送</button>
    </div>
  </div>
</template>

<script>
import axios from "@/utils/axios";

export default {
  data() {
    return {
      content: "",
      img_link: []
    };
  },
  methods: {
    back() {
      window.history.go(-1);
    },
    send() {
      //console.log(axios)
      axios
        .request({
          url: "front/dynamic/issueDynamic",
          data: {
            describe: this.content,
            type: 1,
            classify: 11,
            links: this.img_link
          },
          method: "post"
        })
        .then(() => {
          this.$router.push("/dynamics");
        });
    },
    selectImg(e) {
      var formdata1 = new FormData(); // 创建form对象
      var file = e.target.files[0];
      var reader = new FileReader();
      var that = this;
      reader.readAsDataURL(file);
      reader.onload = function(e) {
        that.ahead = this.result;
      };
      formdata1.append("files", file);
      let config = {
        headers: { "Content-Type": "multipart/form-data" }
      };
      var url = "common/upload";
      axios
        .request({
          url: url,
          headers: { "Content-Type": "multipart/form-data" },
          data: formdata1,
          method: "POST"
        })
        .then(res => {
          this.img_link.push(res.data.data.files);
        });
    }
  },
  updated() {
    //console.log(this.content)
  },
  mounted() {}
};
</script>

<style lang="less" scoped>
.container {
  position: relative;
  background: #fff;
  padding-bottom: 1rem;
  padding: 0 3.2%;

  .input {
    width: 100%;
    height: 7.8rem;
    font-size: 0.64rem;
    padding: 0.92rem 0;
    border: none;
    outline: none;
    color: #444444;
  }

  .img-upload {
    .upload-btn {
      display: inline-block;
      height: 4rem;
      width: 4rem;
      background: rgba(245, 245, 245, 1);
      background-image: url("../../assets/发动态-assets/camera.png");
      background-size: auto 1rem;
      background-repeat: no-repeat;
      background-position: 50% 50%;
    }
  }

  .img-list {
    position: absolute;
    left: 4.5rem;
    top: 7.9rem;
    height: 4rem;
    width: 4rem;
  }

  .btn-hub {
    border-top: 0.5px solid rgba(210, 210, 210, 0.4);
    margin-top: 0.84rem;

    .btn-cell {
      display: flex;
      justify-content: space-between;
      height: 1.84rem;
      line-height: 1.84rem;
      padding-left: 0.4rem;

      .left {
        font-size: 0.64rem;
        color: #666666;

        img {
          width: 0.72rem;
          vertical-align: middle;
          margin-right: 0.36rem;
        }
      }

      .right {
        width: 0.32rem;
        height: 1.84rem;
        background-image: url("../../assets/发视频-assets/next.png");
        background-size: 100% 0.52rem;
        background-repeat: no-repeat;
        background-position: 0 50%;
      }
    }
  }

  .bottom-btn {
    height: 2rem;
    position: fixed;
    width: 100%;
    left: 0;
    bottom: 0;

    button {
      width: 50%;
      height: 2rem;
      padding: 0;
      font-size: 0.64rem;
      border: none;
    }

    .cancel {
      background: rgba(220, 220, 220, 1);
      color: #444444;
    }

    .send {
      background: rgba(0, 120, 255, 1);
      color: #fff;
    }
  }
}
</style>
